<template>
  <div style="height: 90%; width: 100%" class="barChart" id="barChart" v-if="show"></div>
</template>

<script>
export default {
  name: "lineEcharts",
  data() {
    return {
      show: true,
      myChart: null,
      option: {
        backgroundColor: '#fff',
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(0,0,0,.3)',
          borderColor: 'rgba(0,0,0,0)',
          textStyle: {
            fontSize: "18px", //字体大小
            color: "#fff", //字体颜色
          },
          fontSize: "18px",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          left: 'right',
          textStyle: {
            fontSize: "18px", //字体大小
            color: "#004246", //字体颜色
          },
        },
        grid: {
          top: "50",
          left: "3%",
          right: "4%",
          bottom: "30",
          containLabel: true,
        },
        xAxis: {
          name: '日',
          type: "category",
          data: [],
          axisLine: {
            lineStyle: {
              color: "#85A3A3",
            },
          },
          axisLabel: {
            color: "#85A3A3",
            fontSize: 16,
          },
          axisTick: {
            show: true,
          },
          boundaryGap: false,
        },
        yAxis: {
          name: this.yUnit,
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: 16,
              color: "#85A3A3",
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#85A3A3'
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dotted",
              color: "#EBE7E5",
              width: 1,
            },
          },
          // axisTick: {
          //   show: true,
          // },
          // axisLine: {
          //   lineStyle: {
          //     color: "#000",
          //   },
          // },
          // axisLabel: {
          //   color: "rgba(255,0,255,0.6)",
          // },
          // splitArea: {
          //   show: false,
          // },
        },
        series: [
          {
            name: "",
            type: "line",
            // symbol: "circle",
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(60,188,255,0.8)",
                },
                {
                  offset: 1,
                  color: "rgba(60,188,255,0)",
                },
              ]),
            },
            lineStyle: {
              color: "#3cbcff",
              width: 3,
            },
            label: {
              show: true,
              position: 'top'
            },
            smooth: true,
          },
          /*{
            name: "环境湿度",
            type: "line",
            // symbol: "circle",
            data: ["50", "50", "12", "65", "30", "60"],
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2C9FFF",
                },
                {
                  offset: 1,
                  color: "#256435",
                },
              ]),
            },
            lineStyle: {
              color: "#2C9FFF",
              width: 3,
            },
            label: {
              show: true,
              position: 'top'
            },
            smooth: true,
          },*/
        ],
      },
      areaStyle: {
        opacity: 0.8,
        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#2C9FFF",
          },
          {
            offset: 1,
            color: "#256435",
          },
        ]),
      },
      lineStyle: {
        color: "#2C9FFF",
        width: 3,
      },
      label: {
        show: true,
        position: 'top'
      },
    }
  },
  props:{
    echartsData: {
      type: Array,
      default(){
        return []
      }
    },
    unit:{
      type: String,
      default() {
        return '年';
      }
    },
    pageName: {
      type: String,
      default() {
        return 'energySavingReport'
      }
    },
    yUnit :{
      type: String,
      default() {
        return '%';
      }
    },
  },
  watch:{
    echartsData: {
      deep: true,
      handler(n){
        if(n.length){
          this.echartsInit();
        }else{
          let dashEcharts = document.getElementById('barChart');
          let myChartTemp = this.$echarts.init(dashEcharts);
          this.option.series[0].name = '';
          this.option.xAxis.data = [];
          this.option.series[0].data = [];
          myChartTemp.setOption(this.option);
          this.myChart = myChartTemp
        }
      }
    },
  },
  methods: {
    //初始化echarts
    echartsInit() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
        setTimeout(() => {
          console.log(this.echartsData)
          let dashEcharts = document.getElementById('barChart');
          let myChartTemp = this.$echarts.init(dashEcharts);

          let arr = [], val = [];
          this.option.xAxis.name = this.unit;
          if(this.unit == '年'){
            if(this.pageName == 'energySavingReport'){
              this.echartsData.forEach(opt => {
                arr.push(opt.year)
                val.push(opt.savePercent)
              })
            }else{
              this.echartsData.forEach(opt => {
                arr.push(opt.yearMonth)
                val.push(opt.energyConsumption)
              })
            }
            this.option.xAxis.data = arr;
          }else if(this.unit == '月'){
            if(this.pageName == 'energySavingReport'){
              this.echartsData.forEach(opt => {
                arr.push(opt.yearMonth)
                val.push(opt.savePercent)
              })
            }else{
              this.echartsData.forEach(opt => {
                arr.push(opt.yearMonth)
                val.push(opt.energyConsumption)
              })
            }
            this.option.xAxis.data = arr;
          }else{
            if(this.pageName == 'energySavingReport'){
              this.echartsData.forEach(opt => {
                arr.push(opt.createTime)
                val.push(opt.savePercent)
              })
            }else{
              this.echartsData.forEach(opt => {
                arr.push(opt.createtime)
                val.push(opt.energyConsumption)
              })
            }
            this.option.xAxis.data = arr;
          }
          this.option.series[0].name = this.echartsData[0].area
          this.option.series[0].data = val;
          myChartTemp.setOption(this.option);
          this.myChart = myChartTemp
        }, 100)
      })
    },
  }
}
</script>

<style scoped>

</style>
